<template>
  <header>
    <!-- <div class="search-return" @click="goBack">
        <i class="iconfont icon-fanhui"></i>
    </div>
    <div class="search-main">
        <i class="iconfont icon-fangdajing"></i>
        <form action="" onsubmit="return false" @keyup.enter='goSearchList'>
				<input type="search" placeholder="搜索您喜欢的商品..." v-model='searchVal' autofocus ref="myInput">
			</form>
    </div>
    <div class="search-btn" @click="goSearchList">GO</div> -->

    <!-- new -->
    <van-nav-bar left-arrow @click-left="goBack">
        
				<template #right>
          <form action="/" onsubmit="return false">
            <van-search
                v-model="searchVal"
                placeholder="搜索您喜欢的商品..."
                autofocus
                shape="round"
                background="#1b1b1b"
                @keyup.native="goSearchList"
              >
              </van-search>
        </form>
			       <van-icon class="icon" name="search" @click="goSearchList"/>
				</template>
			</van-nav-bar>
  </header>
</template>

<script>
export default {
  data(){
    return{
        searchVal:this.$route.query.key || '',
        searchArr:[]
    }
  },
  mounted() {
        // 键盘监听事件
        window.addEventListener("touchmove", this.myTouchMove, true);
    },
  methods:{
    // 失去焦点
    // myTouchMove() {
    //     this.$refs.myInput.blur()
    // },
    goBack() {
        this.$router.back()
    },
    goSearchList(){
        // 如果搜索的关键字是没有的，那就直接return
        if(!this.searchVal) return;
        // 判断之前有没有搜索的本地存储
        if(!localStorage.getItem('searchList')) {
            // 没有
            localStorage.setItem('searchList','[]')
        }else {
            // 之前有
            this.searchArr = JSON.parse(localStorage.getItem('searchList'))
        }
        // 增加数据
        this.searchArr.unshift(this.searchVal)
        // ES6去重
        let newArr = new Set(this.searchArr)
        // 给本地存储赋值
        localStorage.setItem('searchList', JSON.stringify(Array.from(newArr)))
        // 路径如果没有变化， 不跳转页面
        if(this.searchArr === this.$route.query.key)
        return
        // 跳转页面
        this.$router.push({
            name:'lists',
            query:{
                key:this.searchVal
            }
        })
    }
  }

}
</script>

<style scoped>
  header{
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    width: 100%;
    height: 1.473333rem;
    /* color:#fff;
    background-color: #1b1b1b; */
  }
  
  header ::v-deep .van-nav-bar {
    height: 1.4733rem;
  }
  
  header ::v-deep .van-nav-bar__content {
    background-color: #fff;
    height: 1.4733rem;
  } 
  
  header ::v-deep .van-nav-bar__title {
      color: #1b1b1b;
      font-size: 18px;
  }
  
  header ::v-deep .van-nav-bar .van-icon {
    color: #1b1b1b;
    font-size:0.593333rem;
  
  }
  
  .icon {
    position: relative;
    left: 16px;
  }
  
  header ::v-deep .van-search { 
    padding:0;
  
  }
  
  header ::v-deep .van-search .van-cell {
    width: 250px;
  }
  
  header ::v-deep .van-nav-bar__right{
    right:15px;
  }
  
  /* header ::v-deep .van-search__action {
    line-height: 0px;
    position: relative;
    left: 6px;
  } */
  
  </style>